<template>
  <div class="amap-page-container">
    <el-amap
      vid="amapDemo"
      :zoom="zoom"
      :center="center"
      class="amap-demo"
      ref="amap"
      :events="events"
      :plugin="plugin"
      isHotspot
      rotateEnable
      mapStyle="fresh"
      @complete="complete"
    >
      <!-- 点标记 -->
      <template v-for="(option, index) in markerOptions">
        <el-amap-marker
          v-if="option.icon"
          :key="index"
          vid="component-marker"
          :position="option.position"
          :content-render="option.contentRender"
          :draggable="true"
        ></el-amap-marker>
        <el-amap-marker
          v-else
          :key="index"
          vid="component-marker"
          :position="option.position"
          :draggable="true"
        ></el-amap-marker>
      </template>
      <!-- 图片遮罩层 -->
      <el-amap-ground-image
        v-for="(option, index) in groundimageOptions"
        :key="index"
        :url="option.url"
        :bounds="option.bounds"
        :events="option.events"
      ></el-amap-ground-image>
      <!-- 圆 -->
      <el-amap-circle
        v-for="(option, index) in circleOptions"
        :center="option.center"
        :radius="option.radius"
        :fill-opacity="option.fillOpacity"
        :events="option.events"
        :editable="option.editable"
        :key="index"
      ></el-amap-circle>
      <!-- 多边形 -->
      <el-amap-polygon
        v-for="(polygon, index) in polygonOptions"
        :key="index"
        :vid="index"
        :ref="`polygon_${index}`"
        :path="polygon.path"
        :draggable="polygon.draggable"
        :editable="polygon.editable"
        :events="polygon.events"
      ></el-amap-polygon>
      <!-- 窗口 -->
      <el-amap-info-window
        :position="currentWindow.position"
        :visible="currentWindow.visible"
        :events="currentWindow.events"
        :contentRender="currentWindow.contentRender"
      >
      </el-amap-info-window>
    </el-amap>
    <div class="right-tools">
      <el-divider content-position="left">点操作</el-divider>
      <div class="tools-list">
        <el-button type="info" @click="addMarker()">添加一个点</el-button>
        <el-button type="info" @click="delMarker">随机删除一个点</el-button>
      </div>
      <el-divider content-position="left">图片遮罩操作</el-divider>
      <div class="tools-list">
        <el-button type="info" @click="addGroundimage">添加一个图层</el-button>
        <el-button type="info" @click="delGroundimage"
          >随机删除一个图层</el-button
        >
      </div>
      <el-divider content-position="left">圆形操作</el-divider>
      <div class="tools-list">
        <el-button type="info" @click="addCircle">添加一个圆形</el-button>
        <el-button type="info" @click="delCircle">随机删除一个圆形</el-button>
      </div>
      <el-divider content-position="left">多边形操作</el-divider>
      <div class="tools-list">
        <el-button type="info" @click="addPolygon">添加一个多边形</el-button>
        <el-button type="info" @click="delPolygon"
          >随机删除一个多边形</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "amap-page",
  data() {
    return {
      zoom: 14,
      center: [121.5273285, 31.21515044],
      plugin: [
        "Autocomplete",
        "PlaceSearch",
        "Scale",
        "OverView",
        "ToolBar",
        "MapType",
        "PolyEditor",
        "Geocoder",
        "ContextMenu"
      ],
      events: {
        click: (option) => {
          console.log(option);
          let { lng, lat } = option.lnglat;
          this.center = [lng, lat];
          this.currentWindow.visible = false;
          this.$nextTick(() => {
            this.currentWindow.position = [lng, lat];
            this.currentWindow.visible = true;
          });
        },
      },
      markerOptions: [], // 点配置项
      groundimageOptions: [], // 图片覆盖物配置项
      circleOptions: [], // 圆形配置项
      polygonOptions: [], // 多边形
      currentWindow: {
        position: [0, 0],
        contentRender: (h, instance) => {
          return (
            <div class="window-render">
              <el-button
                type="primary"
                plain
                onClick={() => {
                  this.addMarker(this.center);
                }}
              >
                添加点
              </el-button>
            </div>
          );
        },
        events: {},
        visible: false,
      },
    };
  },
  methods: {
    /**
     * @Description 添加二个标记点
     * @param { position: Array } 地理位置
     * @return { void }
     */
    addMarker(position) {
      let icon = ["el-icon-star-on", "el-icon-s-help", "el-icon-s-promotion"][
        Math.floor(Math.random() * 3)
      ];
      let isIcon = Math.floor(Math.random() * 3) % 2;
      this.markerOptions.push({
        position: position || [
          121.5273285 + (Math.random() - 0.5) * 0.02,
          31.21515044 + (Math.random() - 0.5) * 0.02,
        ],
        icon: isIcon === 0,
        contentRender: (h) => {
          return (
            <div
              style={{
                fontSize: "18px",
                width: "19px",
                height: "30px",
                borderBottom: "3px solid #000",
                borderRadios: "0 0 10px 10px",
              }}
              onClick={() => {}}
            >
              <i class={icon}></i>
            </div>
          );
        },
      });
    },
    /**
     * @Description 随机删除一个点
     * @return { void }
     */
    delMarker() {
      this.markerOptions.splice(
        Math.floor(Math.random() * this.markerOptions.length),
        1
      );
    },
    /**
     * @Description 添加一个图层
     * @return { void }
     */
    addGroundimage() {
      this.groundimageOptions.push({
        url: "https://img2.baidu.com/it/u=4067213903,576412904&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",
        bounds: [
          [121.5273285, 31.21515044],
          [121.5373285, 31.22515044],
        ],
        events: {
          click() {
            alert("click groundimage");
          },
        },
      });
    },
    /**
     * @Description 随机删除一个图层
     * @return { void }
     */
    delGroundimage() {
      this.groundimageOptions.splice(
        Math.floor(Math.random() * this.groundimageOptions.length),
        1
      );
    },
    /**
     * @Description 添加一个圆形
     * @return { void }
     */
    addCircle() {
      this.circleOptions.push({
        center: this.$refs.amap.$$getCenter(),
        editable: true,
        radius: 200,
        fillOpacity: 0.5,
        events: {
          click: () => {},
        },
      });
    },
    /**
     * @Description 随机删除一个圆形
     * @return { void }
     */
    delCircle() {
      this.circleOptions.splice(
        Math.floor(Math.random() * this.circleOptions.length),
        1
      );
    },
    /**
     * @Description 添加一个多边形
     * @return { void }
     */
    addPolygon() {
      this.polygonOptions.push({
        draggable: true,
        editable: true,
        path: [
          this.$refs.amap.$$getCenter(),
          this.$refs.amap.$$getCenter().map((item) => (item += 0.01)),
          this.$refs.amap.$$getCenter().map((item) => (item -= 0.02)),
        ],
        events: {
          click: () => {
            alert("click polygon");
            console.log(amapManager.getComponent(0));
            console.log(this.$refs.map.$$getCenter());
            console.log(this.$refs.polygon_0[0].$$getPath());
          },
        },
      });
    },
    /**
     * @Description 随机删除一个多边形
     * @return { void }
     */
    delPolygon() {
      this.polygonOptions.splice(
        Math.floor(Math.random() * this.polygonOptions.length),
        1
      );
    },
    complete(){
      console.log(123);
    },
  },
  mounted() {
    
  },
};
</script>

<style lang="scss" scoped>
.amap-page-container {
  width: 100%;
  height: 100%;
  position: relative;
  .amap-demo {
    width: 100%;
    height: 100%;
  }
  .right-tools {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 350px;
    height: 60%;
    background: rgba($color: #000000, $alpha: 0.7);
    opacity: 0.2;
    transition: opacity 0.3s;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    &:hover {
      opacity: 1;
    }
    .tools-list {
      display: flex;
    }
  }
}
/deep/.window-render {
  width: 300px;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}
</style>